<template>

<div class="pipelineTask">
    <div style="display: flex;" v-for="(item, index) in moduleInfoList" :key="index">
        
        <div class="moduleRemove" @click="removeEmptyModule(index)" v-if="moduleInfoList.length > 1">
            <el-icon><RemoveFilled/></el-icon>
        </div>

        <div class="pipelineModuleTask">
            <div style="margin-top:100px;">
                <el-divider>
                    <el-icon>
                        <el-button :class="{ active: item.isSelect }" @click="selectTaskModule(item)">{{item.moduleName}}
                        </el-button>
                    </el-icon>
                </el-divider>
            </div>
        </div>

        <div class="modulePlus" @click="addEmptyModule(index)" >
            <el-icon><CirclePlusFilled /></el-icon>
        </div>		
    </div>	
</div>


<el-drawer v-model="moduleItemVisible" title="添加任务"  size="40%" :append-to-body="true">
	<el-tabs tab-position="left" style="height: 400px" class="demo-tabs">
		<el-tab-pane :label="moduleItemList[0].groupName" v-for="(moduleItemList, index) in pipelineModuleList">
			<el-card body-class="custom-card" shadow="never" v-for="(moduleItem, index) in moduleItemList" >
				<div @mouseover="mouseOver" @mouseleave="mouseLeave" style="display: flex;justify-content: space-between;align-items: center;">  
					<div>
						<span>{{ moduleItem.moduleName}}</span>
						<div style="margin-top: 10px;">
							<span style="color: #999;">{{ moduleItem.moduleMessage }}</span>
						</div>
					</div>
					<div>
						<el-button v-show="displayAddButton" type="primary" :icon="Plus" @click="selectModuleItem(moduleItem)" circle />	
					</div>
        		</div>
			</el-card>
		</el-tab-pane>
  	</el-tabs>
</el-drawer>

<gitModule ref="gitCloneRef"></gitModule>

<mavenCompile ref="mavenCompileRef" ></mavenCompile>

<deploySb ref="deploySbRef"></deploySb>

</template>

<script setup lang="ts">
import { reactive, ref,onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { defineProps } from 'vue';


import {
  CirclePlusFilled,
  Plus,
  RemoveFilled
} from '@element-plus/icons-vue'

import { getRequest,postReq } from '@/utils/request'
import uri from '@/api/uri'
import gitModule from './module/git-module.vue'
import mavenCompile from './module/maven-compile.vue'
import deploySb from './module/deploy_sb.vue'

interface ModuleInfo{
    moduleType:string,
    moduleName:string,
    moduleContent:string,
    isSelect:boolean
}

const pipelineModuleList= ref<any>([])
const displayAddButton = ref(false)
const moduleItemVisible = ref(false)

const mavenCompileRef = ref()
const gitCloneRef = ref()
const deploySbRef = ref()

var moduleItemMap = new Map()
//新增一个空的任务
const addEmptyModule =(index:number) => {
    getNewModule(index)
}

//移除一个任务模块
const removeEmptyModule =(index:number) => {
    ElMessageBox.confirm('确定移除模块操作?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		})
		.then(() => {
            props.moduleInfoList.splice(index,1)
		}
    )
		.catch(() => {})
}

const getNewModule =(index:number) =>{
    const module:ModuleInfo = {
        moduleType:'',
        moduleName:'新任务',
        moduleContent:'',
        isSelect:false
    }
    const pre = props.moduleInfoList.slice(0,index+1)
    const after = props.moduleInfoList.slice(index+1)
    props.moduleInfoList.splice(0, props.moduleInfoList.length)
    props.moduleInfoList.push(...pre)
    props.moduleInfoList.push(module)
    props.moduleInfoList.push(...after)
    
}

//选择一个空模块进行修改
const selectTaskModule =(item:ModuleInfo) =>{
    props.moduleInfoList.forEach((moduleInfo:any) => {
        moduleInfo.isSelect = false
    })
    item.isSelect = true
    if(item.moduleType){
		//模块类型不为空，进行修改
		const moduleRef = moduleItemMap.get(item.moduleType)
		moduleRef.value.init(item)
	}else{
		//进入选择模块列表
        moduleItemVisible.value = true
	}
    
}


const validData = async () => {
    const promise = props.moduleInfoList.map((item:any) => {
        return new Promise((resolve,reject) => {
            if(!moduleItemMap.get(item.moduleType)){
                resolve(false)
            }else{
                let moduleVaild =  moduleItemMap.get(item.moduleType).value.validData()
			    resolve(moduleVaild)
            }
		})
    })
    const data  = await Promise.all(promise)
    return data
}

const selectModuleItem =(moduleItem:any) =>{
    props.moduleInfoList.forEach((moduleInfo:any) => {
        if(moduleInfo.isSelect){
            moduleInfo.moduleType = moduleItem.moduleType
	        moduleInfo.moduleName = moduleItem.moduleName
            moduleItemVisible.value = false
            const moduleRef = moduleItemMap.get(moduleInfo.moduleType)
	        moduleRef.value.init(moduleInfo)
        }
    })
}

onMounted(() =>{
    getPipelineModuleItem()
    initModuleRefMap()
})

const getPipelineModuleItem =() =>{
	getRequest(uri.getPipelineModule).then(res =>{
		pipelineModuleList.value = res.data
	})
}
const initModuleRefMap =() =>{
	moduleItemMap.clear()
	moduleItemMap.set("gitClone",gitCloneRef)
	moduleItemMap.set("mavenCompile",mavenCompileRef)
    moduleItemMap.set("deploySpringBoot",deploySbRef)
}

const mouseOver =() =>{
	displayAddButton.value = true
}

const mouseLeave =() =>{
	displayAddButton.value = false
}

const props = defineProps({
  moduleInfoList: Array as any,
});

defineExpose({
	validData
})


</script>
<style>
.pipelineTask{
    display: flex; 
    padding: 20px;
}
.pipelineModuleTask{
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
	height: 400px;
    width: 200px; 
    padding: 20px;
}
.modulePlus{
    margin-top:115px;
    cursor: pointer; 
    transform: translate(-50%); 
}
.moduleRemove{
    margin-top:115px;
    cursor: pointer; 
    transform: translate(+50%);
}
.el-button.active {    
border-color: #409eff; 

} 

</style>